<!DOCTYPE html>
<meta charset="utf-8">
<style>
	.link {
		fill: none;
		stroke: #666;
		stroke-width: 1.5px;
	}

	#licensing {
		fill: green;
	}

	.link.licensing {
		stroke: green;
	}

	.link.resolved {
		stroke-dasharray: 0, 2 1;
	}

	circle {
		fill: #ccc;
		stroke: #333;
		stroke-width: 1.5px;
	}

	text {
		font: 10px sans-serif;
		pointer-events: none;
		text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
	}
#joinedSamsung.link
{
	fill:pink;
}
</style>
<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
		// http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/
		var links = [{
			source : "Microsoft",
			target : "Amazon",
			type : "licensing"
		}, {
			source : "Microsoft",
			target : "HTC",
			type : "licensing"
		}, {
			source : "Samsung",
			target : "Apple",
			type : "suit"
		}, {
			source : "Motorola",
			target : "Apple",
			type : "suit"
		}, {
			source : "Nokia",
			target : "Apple",
			type : "resolved"
		}, {
			source : "HTC",
			target : "Apple",
			type : "suit"
		}, {
			source : "Kodak",
			target : "Apple",
			type : "suit"
		}, {
			source : "Microsoft",
			target : "Barnes & Noble",
			type : "suit"
		}, {
			source : "Microsoft",
			target : "Foxconn",
			type : "suit"
		}, {
			source : "Oracle",
			target : "Google",
			type : "suit"
		}, {
			source : "Apple",
			target : "HTC",
			type : "suit"
		}, {
			source : "Microsoft",
			target : "Inventec",
			type : "suit"
		}, {
			source : "Samsung",
			target : "Kodak",
			type : "resolved"
		}, {
			source : "LG",
			target : "Kodak",
			type : "resolved"
		}, {
			source : "RIM",
			target : "Kodak",
			type : "suit"
		}, {
			source : "Sony",
			target : "LG",
			type : "suit"
		}, {
			source : "Kodak",
			target : "LG",
			type : "resolved"
		}, {
			source : "Apple",
			target : "Nokia",
			type : "resolved"
		}, {
			source : "Qualcomm",
			target : "Nokia",
			type : "resolved"
		}, {
			source : "Apple",
			target : "Motorola",
			type : "suit"
		}, {
			source : "Microsoft",
			target : "Motorola",
			type : "suit"
		}, {
			source : "Motorola",
			target : "Microsoft",
			type : "suit"
		}, {
			source : "Huawei",
			target : "ZTE",
			type : "suit"
		}, {
			source : "Ericsson",
			target : "ZTE",
			type : "suit"
		}, {
			source : "Kodak",
			target : "Samsung",
			type : "resolved"
		}, {
			source : "Apple",
			target : "Samsung",
			type : "suit"
		}, {
			source : "Kodak",
			target : "RIM",
			type : "suit"
		}, {
			source : "Nokia",
			target : "Qualcomm",
			type : "suit"
		}];

		var nodes = {};

		// Compute the distinct nodes from the links.
		links.forEach(function(link) {
			link.source = nodes[link.source] || (nodes[link.source] = {
				name : link.source
			});
			console.log(link.source)
			link.target = nodes[link.target] || (nodes[link.target] = {
				name : link.target
			});
		console.log("link to target" , link.target)
		// console.log("name of each link " , name);
		});

		var width = 960, height = 500;

		var force = d3.layout.force().nodes(d3.values(nodes)).links(links).size([width, height]).linkDistance(60).charge(-300).on("tick", tick).start();
		var color = d3.scale.category20();

		var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

		// Per-type markers, as they don't inherit styles.
		svg.append("defs").selectAll("marker").data(["suit", "licensing", "resolved"]).enter().append("marker").attr("id", function(d) {
			return d;
		}).attr("viewBox", "0 -5 10 10").attr("refX", 15).attr("refY", -1.5).attr("markerWidth", 6).attr("markerHeight", 6).attr("orient", "auto").append("path").attr("d", "M0,-5L10,0L0,5");

		var path = svg.append("g").selectAll("path").data(force.links()).enter().append("path").attr("class", function(d) {
			return "link " + d.type;
		})
		.attr("id", function(d) {
				return "joined" + d.target.name ;
		})
		.attr("marker-end", function(d) {
			return "url(#" + d.type + ")";
		});

		var circle = svg.append("g").selectAll("circle").data(force.nodes()).enter().append("circle").attr("r", 6).attr("id", function(n) {
			return "noded" + n.name;
		}).style("fill", function(c) {
			return color(c.type)
		}).call(force.drag)
		
           
		
		

		var text = svg.append("g").selectAll("text").data(force.nodes()).enter().append("text").attr("x", 8).attr("y", ".31em").attr("id", function(d) {
		
			return  "label" + d.name;
		}).text(function(d) {
			return d.name;
		})		

		// Use elliptical arc path segments to doubly-encode directionality.
		function tick() {
			path.attr("d", linkArc);
			circle.attr("transform", transform);
			text.attr("transform", transform);
		}

		function linkArc(d) {
			var dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dr = Math.sqrt(dx * dx + dy * dy);
			return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
		}

		function transform(d) {
			return "translate(" + d.x + "," + d.y + ")";
		}

		// Find the joined nodes

		//create empty object for the node info
		var node2neighbors = {};

		//for each of the nodes

		console.log("number of links", links.length);
		for (var i = 0; i < links.length; i++) {
		
		console.log("neighbours of " + name ,  node2neighbors[name])
			
			//create a variable of its source
			var name = links[i].source.name;
			

			//use that name to filter out the items
			node2neighbors[name] = links.filter(function(d) {

				//get the name and if it matches the name or target
				return  d.target.name == name;
			}).map(function(d) {//map it to the correspon

				return d.source.name; 
			
	});
				var neighbors  = node2neighbors[name]
			
	
				circle.on("click", function(n) {
					// Determine if current node's neighbors and their links are visible
					var active = n.active ? false : true// toggle whether node is active
					, newOpacity = active ? 0 : 1;
					var name = n.name;
					var neighbors  = node2neighbors[name]
					console.log(name);
					
					if (neighbors != undefined){
					for (var i = 0; i < neighbors.length; i++) {
					console.log("number of neighbours", neighbors[i]);
					d3.select("#noded" + neighbors[i]).style("opacity", newOpacity);
					d3.select("#joined" + neighbors[i]).style("opacity", newOpacity);
					d3.select("#label" + neighbors[i]).style("opacity", newOpacity);
							             				}
             				  
					}
					

			 n.active = active;
			});

		}

	</script>
